﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>TweenMax demon</title>
        <script src="minified/TweenMax.min.js"></script>
        <script src="minified/jquery-1.10.1.min.js"></script>
        <script src="minified/jquery-ui.min.js"></script>
        <!--tweenmax中文网演示实例 www.tweenmax.com.cn-->
		<!-- Demo styles -->
		<style>
	body {background-color:black;}
img {margin:10px;}
#trans3DDemo {
	position:absolute;
	top:70px;
	left:240px;
	width:240px;
}

#trans3DBoxes div {
	position:relative;
	width:60px;
	height:60px;
	background-color:#f60;
	margin-right:10px;
	margin-bottom:10px;
	border:solid 2px #FFF;
	display:inline-block;
}

#nav {
  position:absolute;
  width:600px;
  left:50px;
  top:400px;
}

#play_btn, .play {
	float:right;
	margin-top:20px;
}
		</style>
	</head>
	<body>
<div id="trans3DDemo">
  <div id="trans3DBoxes">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav">
  <div id="slider" style="background-color:#444;"></div>
  <button id="play_btn">play</button>
</div>


	<script>


var trans3DDemo = $("#trans3DDemo"), 
    trans3DBoxes = $("#trans3DBoxes"),// div containing all the orange boxes
    boxes = $("#trans3DBoxes div"), // all orange boxes   
		  slider = $("#slider"), 
		  play_btn = $("#play_btn").button(),
    threeDTimeline = new TimelineLite({onUpdate:updateSlider}); //onUpdate allows the slider to stay in sync as animation plays
    
//transformPerspective gives the element its own vanishing point
//perspective allows all the child elements (orange boxes) to share the same vanishing point with each other
//transformStyle:"preserve3d" allows the child elements to maintain their 3D position (noticeable only when their parent div is rotated in 3D space)
TweenLite.set(trans3DBoxes, {css:{transformPerspective:400, transformStyle:"preserve-3d"}}); //saves a dozen lines of vendor-prefixed css ;)

//fade in demo, rotate the div containing all the boxes, and add a label 0.2 seconds after the rotation
threeDTimeline.fromTo(trans3DDemo, .05, {css:{autoAlpha:0}}, {css:{autoAlpha:1}, immediateRender:true})
              .to(trans3DBoxes, 0.3, {css:{rotationY:30, rotationX:20}})
              .add("z", "+=0.2"); //add label "z" for placement of next group of tweens

//loop through each element in boxes object and give it a unique and random animation along the z-axis
boxes.each(function (index, element) {
  threeDTimeline.to(element, 0.2, {css:{z:getRandom(-50, 50)}}, "z"); //place each z-tween of each box at the label "z"
})
	
//rotate the group of boxes around a few more times  
threeDTimeline.to(trans3DBoxes, 1, {css:{rotationY:180, z:-180}, ease:Power2.easeOut}, "+=0.2")
              .to(trans3DBoxes, 1, {css:{rotationX:180, z:-10}});
	  
//random explosion effect	  
boxes.each(function (index, element) {
  threeDTimeline.to(element, 1, {css:{z:200, backgroundColor:Math.random() * 0xffffff, rotationX:getRandom(-360, 600), rotationY:getRandom(-360, -600), autoAlpha:0}}, "explode");
}) ;


//jQueryUI Slider

function updateSlider(){
  slider.slider("value", threeDTimeline.progress() *100);
}

$( "#slider" ).slider({
            range: false,
            min: 0,
            max: 100,
			step:.1,
            slide: function ( event, ui ) {
				    threeDTimeline.pause();
            threeDTimeline.progress( ui.value/100 );
            }
     });	

	
function getRandom(max, min){
	return Math.floor(Math.random() * (1 + max - min) + min);
}	
		
$("#play_btn").click(function(){
 
	if(threeDTimeline.progress()==1){
		threeDTimeline.restart();
		}else{
			threeDTimeline.play(); 
		}
}) 

    </script>
	</body>
</html>